<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>分配设置</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<ul class="progressBox">
				<li class="hover">语文</li>
				<li>数学</li>
				<li>英语</li>
			</ul>
			<div class="allocationgz">
				<span>教师分配原则：</span>
				<ul>
					<li class="hover">效率模式</li>
					<li>平均模式</li>
					<li>定量模式</li>
				</ul>
			</div>
			<div class="allocationContent">
				<div class="allocationContentLeft">
					<div class="allocationAttentionLeft">
						<span>待分配教师：<i>5</i>/位</span>
					</div>
					<div class="tableStyle">
						<table cellspacing="0" cellpadding="0" style="width:100%">
							<tr>
								<th>待分配教师</th>
								<th>操作</th>
							</tr>
							<tr v-for="item in Teachertobeassigned">
								<td>{{item.name}}<i>/{{item.telephone}}</i></td>
								<td><span>加入分配<em class="el-icon-plus"></em></span></td>
							</tr>
						</table>
					</div>
					<div class="buttonBox">
						<b>全部分配</b>
					</div>
				</div>
				<div class="allocationContentRight">
					<div class="allocationAttentionRight">
						<div class="aartop">
							<span>已分配教师：<i>5</i>/位</span>
						</div>
						<div class="aarbottom">
							<span>题组分配：</span>
							<el-select v-model="value" placeholder="请选择">
							    <el-option
							      v-for="item in options"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							</el-select>
							<em class="tmguanli">题目管理</em>
						</div>
					</div>
					<div class="tableStyle">
						<table cellspacing="0" cellpadding="0" style="width:100%">
							<tr>
								<th>已分配教师</th>
								<th>手机号&账号</th>
								<th>题组偏好</th>
								<th>操作</th>
							</tr>
							<tr v-for="item in assignedteacher">
								<td>{{item.name}}</td>
								<td>{{item.telephone}}</td>
								<td>
									<el-select v-model="item.questionnumber" multiple placeholder="请选择">
										<el-option
										  v-for="item in options"
										  :key="item.value"
										  :label="item.label"
										  :value="item.value">
										</el-option>
									</el-select>
								</td>
								<td><span class="yichuteacher">移除分配<em class="el-icon-minus"></em></span></td>
							</tr>
						</table>
					</div>
					<div class="buttonBox">
						<b>保存</b>
						<b>取消</b>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	export default{
		data(){
			return{
				Teachertobeassigned:[
					{
						name:'涨老师',
						telephone:'111111111'
					},
					{
						name:'刘老师',
						telephone:'22222222222'
					}
				],
				assignedteacher:[
					{
						name:'涨老师',
						telephone:'111111111',
						questionnumber:[],
						ypy:'',
						yfp:'',
						totalnumber:''
					},
					{
						name:'刘老师',
						telephone:'22222222222',
						questionnumber:[],
						ypy:'',
						yfp:'',
						totalnumber:''
					}
				]
			}
		},
		methods:{
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:20px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.allocationgz{
		display: flex;
		align-items: center;
		justify-content: left;
		margin-top:14px;
	}
	.allocationgz span{
		color:#2A303B;
		font-size:14px;
	}
	.allocationgz ul{
		display: flex;
		align-items: center;
		width: 252px;
		height: 30px;
		background: rgba(41,92,255,0.06);
		border-radius: 4px;
		border: 1px solid #295CFF;
	}
	.allocationgz ul li{
		line-height:30px;
		border-right:solid 1px #295CFF;
		font-size: 14px;
		color: #295CFF;
		cursor: pointer;
		flex: 1;
		text-align: center;
	}
	.allocationgz ul li:last-child{
		border-right:none;
	}
	.allocationgz ul li:hover,.allocationgz ul li.hover{
		background: #295CFF;
		color:#fff;
	}
	.allocationgz ul li:first-child:hover,.allocationgz ul li:first-child.hover{
		border-radius: 3px 0px 0px 3px;
	}
	.allocationgz ul li:last-child:hover,.allocationgz ul li:last-child.hover{
		border-radius: 0px 3px 3px 0px;
	}
	.allocationAttentionLeft{
		box-sizing: border-box;
		width: 354px;
		height: 54px;
		background: #E8F0FA;
		border-radius: 10px 10px 0px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:14px;
		padding:0 14px;
	}
	.allocationAttentionLeft span{
		color:#557292;
	}
	.allocationAttentionLeft span i{
		font-style: normal;
		color:#295CFF;
	}
	.allocationAttentionLeft b{
		cursor: pointer;
		font-weight: normal;
		color: #295CFF;
	}
	.allocationAttentionRight{
		box-sizing: border-box;
		width: 826px;
		height: 54px;
		background: #E8F0FA;
		border-radius: 10px 10px 0px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:14px;
		padding:0 14px;
	}
	.aartop{
		color:#557292;
	}
	.aartop span{
		margin-right:14px;
	}
	.aartop i{
		font-style: normal;
		color: #295CFF;
	}
	.aarbottom{
		color:#557292;
		display: flex;
		align-items: center;
	}
	.aarbottom >>> .el-input__inner{
		width: 188px;
		height: 34px;
		background: #FFFFFF;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
		line-height:34px;
	}
	.aarbottom >>>  .el-input__icon{
		line-height:34px;
	}
	.aarbottom em{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-style:normal;
		font-size:14px;
		color:#fff;
		text-align: center;
		line-height:34px;
		margin-left:14px;
	}
	.allocationContent{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:14px;
	}
	.tableStyle{
		background:#fff;
		padding:14px;
		height:calc(100vh - 365px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.tableStyle::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableStyle table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableStyle table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableStyle table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableStyle table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableStyle table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableStyle table tr td:last-child{
		border-right:none;
	}
	.tableStyle table tr td i{
		font-style: normal;
		font-size:12px;
		color:#999
	}
	.tableStyle table tr td span{
		display: flex;
		align-items: center;
		color:#295CFF;
		justify-content: center;
		cursor: pointer;
	}
	.tableStyle table tr td span em{
		font-size:12px;
		font-style:normal;
		margin-left:5px;
	}
	.tableStyle table tr td span.yichuteacher{
		color:#EC555A
	}
	.tableStyle table tr:nth-child(3n){
		background:#FAFAFB
	}
	.tableStyle table tr td >>>.el-input__inner{
		width: 100px;
		height: 30px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.tableStyle table tr td >>> .el-input__icon{
		line-height:30px;
	}
	.buttonBox{
		width:100%;
		height:60px;
		background:#fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius:0 0 10px 10px;
	}
	.buttonBox b{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-weight: normal;
		font-size:14px;
		color:#fff;
		cursor: pointer;
		text-align: center;
		line-height:34px;
		margin:0 8px;
	}
	.buttonBox b:nth-child(2){
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF
	}
	.progressBox{
		display: flex;
		justify-content: left;
		align-items: center;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		margin-top:14px;
		padding:0 24px;
	}
	.progressBox li{
		font-size:14px;
		color:#557292;
		position:relative;
		margin-right:14px;
		line-height:54px;
		cursor: pointer;
	}
	.progressBox li:hover,.progressBox li.hover{
		color:#2A303B
	}
	.progressBox li:hover::after,.progressBox li.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position:absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>